<template>
    <div v-if="props.billData.list">
        <div v-for="(listItem,index) in props.billData.list">
            <van-cell-group >
                <div class="head">
                    <div class="date">
                        {{ listItem.date.split("-")[1] }}月{{ listItem.date.split("-")[2] }}日
                    </div>
                    <div class="money">
                        <span><i>出</i>{{ getDateExpenseOrIncome(listItem)[0] }}</span>
                        <span><i>入</i>{{ getDateExpenseOrIncome(listItem)[1] }}</span>
                    </div>
                </div>
                <van-cell 
                :key="item.id"
                :title="item.type_name" 
                :label="`${formateHour(+item.date)} ${item.remark}`"
                :value="`${item.pay_type === 1 ? '-' : '+'}${item.amount}`" 
                :value-class="`${item.pay_type === 1? 'expense' : 'cart-income'}`" 
                @click = "goDetail(item)"
                v-for="item in props.billData.list[index].bills">
                    <template #icon  >
                        <div class="icon":class="{'income': item.pay_type === 2}">
                            <i class=" iconfont" :class="icons[item.type_name]"></i>
                        </div>
                    </template>
                    
                </van-cell>
            </van-cell-group>
        </div>
    </div>

</template>

<script setup>
import { ref, computed,defineProps} from 'vue'
import { formateHour } from '@/utils/date.js' 
import { useRouter } from 'vue-router'
import icons from '@/utils/icons';

const dateExpense = ref(0)
const dateIncome = ref(0)
const router = useRouter()

const props = defineProps({
    billData: {
        type: Object,
        default: () => ({})
    }
})


const getDateExpenseOrIncome = (item) => {
    for (let i = 0; i < item.bills.length; i++) {
        const element = item.bills[i];
        if (element.pay_type === 1) {
            dateExpense.value += Number(element.amount)
        } 
        else if (element.pay_type === 2) {
            dateIncome.value += Number(element.amount)
        }
    }
    let Expense = dateExpense.value
    dateExpense.value = 0
    let Income = dateIncome.value
    dateIncome.value = 0
    return [Expense,Income]
}

// 方法二
// 当computed中使用的响应式数据值发生变更，会重新执行computed中的函数
// const expense = computed(() => {
//   let res = 0
//   props.billData.bills.forEach(item => {
//     if (item.pay_type === 1) {
//       res += (+item.amount)
//     }
//   })
//   return res.toFixed(2)
// })
// const income = computed(() => {
//   let res = 0
//   props.billData.bills.forEach(item => {
//     if (item.pay_type === 2) {
//       res += (+item.amount)
//     }
//   })
//   return res.toFixed(2)
// })

const goDetail = (item) => {
    console.log(item);
    router.push({
        path: '/detail',
        query: {
            id: item.id
        }
    })
}
</script>

<style lang="less" scoped>
.head {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;
    background-color: #f9f9f9;

    .date {
        font-size: 16px;
    }

    .money {
        font-size: 14px;

        span {
            margin-left: 10px;

            i {
                display: inline-block;
                margin-right: 5px;
                font-weight: 200;
                width: 20px;
                height: 20px;
                background-color: rgb(240, 240, 240);
                text-align: center;
                line-height: 20px;
            }
        }
    }
}

.icon {
    width: 30px;
    height: 30px;
    background-color: #37aa61;
    border-radius: 50%;
    margin: auto 0;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    .iconfont {
        color: #fff;
    }

    &.income{
    background-color: #f2b63b ;
  }
}
:deep(.cart-income){
  color: #f2b63b!important;
}
</style>


<!-- <style>
.cart-income{
  color: #f2b63b !important;
}
</style> -->